<template>
  <van-grid class="an-grid">
    <van-grid-item v-for="item in list" :key="item.id" :text="item.lable" :to="item.url">
      <template #icon>
        <div class="an-ico-bg" :class="'bg'+item.id">
          <svg-icon :icon-class="item.icon"></svg-icon>
        </div>
      </template>
    </van-grid-item>
  </van-grid>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          lable: "数码",
          icon: "computer",
          url: "/sort",
        },
        {
          id: 2,
          lable: "服装",
          icon: "clothes",
          url: "/sort?tab=1",
        },
        {
          id: 3,
          lable: "日用",
          icon: "goods",
          url: "/sort?tab=2",
        },
        {
          id: 4,
          lable: "百货",
          icon: "lamp",
          url: "/sort?tab=3",
        },
      ],
    };
  },
};
</script>
<style lang="scss">
.an-grid {
  .van-grid-item__content {
    background: transparent;
    &::after {
      border: none;
    }
  }
}
</style>

<style lang="scss" scoped>
.an-ico-bg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background-image: linear-gradient(to bottom right, #6bcdff, #028fd6);
  &.bg1 {
    background-image: linear-gradient(to bottom right, #6bcdff, #028fd6);
  }
  &.bg2 {
    background-image: linear-gradient(to bottom right, #f9c97e, #da8603);
  }
  &.bg3 {
    background-image: linear-gradient(to bottom right, #ffafaf, #fb1010);
  }
  &.bg4 {
    background-image: linear-gradient(to bottom right, #78eab7, #04ce71);
  }
}
</style>
